/*
 * @Description:可视区域加载
 * @Author: ruanyuesheng
 * @Date: 2022-12-21 14:19:54
 * @LastEditTime: 2022-12-23 17:00:09
 * @LastEditors: r_yuesheng
 */
import { useIntersectionObserver } from '@vueuse/core'
/**
 * 参数说明
 * @param {*} targetDiv 目标div (禁止直接绑定在组件上,必须绑定到外层的div上)
 * @param {*} apiFn  需要调用的函数方法
 * @param {*} isLoop  是否持续监听,默认为false,即调用一次后则停止监听事件
 * @param {*} callBack 回调,用于执行额外任务
 */
export const useLazyData = (targetDiv, apiFn, isLoop = false, callBack) => {
  if (!targetDiv) return;
  // 监听预设组件是否已进入可视区
  const { stop } = useIntersectionObserver(targetDiv, ([{ isIntersecting }]) => {
    // 如果targetDiv所对应的DOM进入可视区，则该回调函数触发
    if (isIntersecting) {
      // 当被监听的DOM进入了可视区:此时根据业务决定是否停止继续监听
      if (!isLoop) stop()
      typeof apiFn === 'function' && apiFn();
      callBack && callBack();
    }
  })
}
